import {useState,useEffect} from 'react'
import { Input, Select,DatePicker,Button,Form } from 'antd';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const { Search } = Input;
const { RangePicker } = DatePicker;

interface Options{
  value:string,
  label:string
}
interface Icoloms{
  type:string;
  name:string;
  label?:string;
  options:Options;
  onchange?:any
}


export default function SearchInfo(props:any) {

  const [coloms,setColoms] = useState<Icoloms[]>(props.coloms)
  const dateFormat = 'YYYY/MM/DD';
    const handleChange = (value: string) => {
      console.log(`selected ${value}`);
      props.getOrganId(value)
    };

    const onDateChange = (
      value: DatePickerProps['value'] | RangePickerProps['value'],
      dateString: [string, string] | string,
    ) => {
      console.log('Selected Time: ', value);
      setDate(dateString)
      console.log('Formatted Selected Time: ', dateString);
    };

    const [date,setDate] = useState<any>('')
    const onFinish = (values: any) => {
      if(date){
        values.rangePicker = date
      }
      props.click(values)
    };

  return (
    <>
      <Form
        name="basic"
        layout="inline"
        // labelCol={{ span: 8 }}
        size='large'
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
        
      >
        {
          coloms.map((item:any,index:any)=>{
           
           if(item.type=='text'){
             return <Form.Item label={item.label}  name={item.name} style={{marginBottom:'10px'}} key={index} >
                       <Search placeholder="请输入搜索内容" allowClear  onSearch={item.onchange} />
                     </Form.Item>
           }else if(item.type=='select'){
             return <Form.Item label={item.label} name={item.name} style={{marginBottom:'10px'}} key={index}>
                     <Select
                           style={{ width: 280 }}
                           onChange={handleChange}
                           options={item.options}
                         />
                   </Form.Item>
           }else if(item.type=='rangePicker'){
             return <Form.Item label={item.label} name={item.name} style={{marginBottom:'10px'}} key={index}>
                     <RangePicker   onChange={onDateChange}     format={dateFormat}   />
                   </Form.Item>
           }else if(item.type=='button'){
              return <Form.Item wrapperCol={{ offset: 3, span: 16 }} key={index}>
                      <Button type="primary" htmlType="submit">
                        搜索
                      </Button>
                    </Form.Item>
           }
        })
        }
        
      </Form>
    </>
  )
}

// 使用说明  表单
/**日期选择器有且只有一个 且name 必须为 rangePicker，其它随意 类型只有三个 text select rangePicker button 
 * 只有单个text搜索不需要button 多个需求搜索需要button
 * 点击搜索将数据传递给父组件
 * 参数   coloms click：点击事件  (value:any)=>goSearch(value)
 * <SearchInfo coloms={searchColoms} click={(value:any)=>goSearch(value)}></SearchInfo>
 * 方式一  
 * const searchColoms = [
    {
      type:'text',
      name:'text',
      onchange:(value?:any)=>{  可写可不写，不写放大镜按钮不可用
       console.log(value);
     }
    },{
      type:'select',
      name:'gender',
      label:'年龄',
      options:[
        { value:'0',label:'男'},
        {value:'1',label:'女'}
      ]
    },
    {
      name:'rangePicker',
      type:'rangePicker',
      label:'2',
    },
    {
      name:'button',
      type:'button',
    }
  ]
  方法二
    const searchColoms = [
    {
      type:'text',
      name:'text',
      onchange:(value:any)=>gotextSearch(value)
    },
  ]
  const gotextSearch=(value?:any)=>{
    console.log(value);
  }
  
   
 * 
 */
